import React from 'react'
import './ui.less'
import { Card, Modal, Button } from 'antd'
const confirm = Modal.confirm;

class Modals extends React.Component {
    state ={
        showModal1: false,
        showModal2: false,
        showModal3: false,
        showModal4: false
    }

    handleOpen = (type) => {
        this.setState({
            [type]: true
        })
    }
    
    //设置 onOk 和 onCancel  的返回功能
    handleClose =(type) => {
        this.setState({
            [type]: false
        })
    }

    //信息确认框
    handleConfirm =(type) => {
        Modal[type]({
            title: 'react 学习之框架',
            content: '确定你已经掌握了 antd 了?',
            onOk() {
              console.log('OK');
            },
            onCancel() {
              console.log('Cancel');
            },
          });
    }
    render() {
        return (
            <div>
                <Card title="Modal 基础模态框" className="warp">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部20px弹框</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平垂直居中</Button>
                    <Modal
                        title="React 之 antd 学习"
                        visible={this.state.showModal1}
                        onOk={() => this.handleClose('showModal1')}
                        onCancel={() => this.handleClose('showModal1')}
                    >
                        <p>欢迎学习react 并使用antd 框架</p>
                    </Modal>
                    <Modal
                        title="React 之 antd 学习"
                        okText="确认"
                        cancelText="取消"
                        visible={this.state.showModal2}
                        onOk={() => this.handleClose('showModal2')}
                        onCancel={() => this.handleClose('showModal2')}
                    >
                        <p>欢迎学习react 并使用antd 框架</p>
                    </Modal>
                    <Modal
                        title="今天你吃了吗"
                        style={ {top: 20} }
                        visible={this.state.showModal3}
                        onOk={() => this.handleClose('showModal3')}
                        onCancel={() => this.handleClose('showModal3')}
                    >
                        <p>欢迎学习react 并使用antd 框架</p>
                    </Modal>
                    <Modal
                        title="今天你吃了吗"
                        // wrapClassName 对话框外层容器的类名
                        wrapClassName="vertical-center-modal"
                        visible={this.state.showModal4}
                        onOk={() => this.handleClose('showModal4')}
                        onCancel={() => this.handleClose('showModal4')}
                    >
                        <p>欢迎学习react 并使用antd 框架</p>
                    </Modal>
                </Card>
                <Card title="Modal 信息确认框" className="warp">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('error')}>Error</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Warning</Button>
                </Card>
            </div>
        )
    }
}


export default Modals